<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link rel="stylesheet" href="/static/iframe0/css/style.css" />
		<link rel="stylesheet" type="text/css" href="/static/iframe0/css/audioplayer.css"/>
		<script type="text/javascript" src="/static/iframe0/js/jquery.min.js"></script>
		<script type="text/javascript" src="/static/iframe0/js/jquery.dragsort-0.5.2.min.js"></script>
		<script type="text/javascript">
			$("ul:first").dragsort();
		</script>
		<script type="text/javascript" src="/static/iframe0/js/drag.js"></script>
    
	    <script>
	        $(function(){
	            $('.s_event').each(function(){
	                $(this).dragging({
	                    move : 'x',
	                    randomPosition : true
	                });
	            });
	        });
	    </script>
		<script src="/static/iframe0/js/audioplayer.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/iframe0/js/main.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="container">
			<div class="box">
				<!--左边列表-->
				<div class="LeftBox fl">
					<div class="hangUp">
						<h2>挂起</h2>
					</div>
					<div class="LeftImgList">
						<ul id="list2">
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯</p></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯</p></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯</p></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯</p></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯</p></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯</p></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯</p></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯</p></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯</p></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯</p></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯</p></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯</p></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯</p></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯</p></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯</p></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯</p></li>
						</ul>
					</div>

				</div>
				<!--右边-->
				<div class="RightBox fl">
					<!--右上-->
					<div class="topList fl">
						<!--图片列表-->
						<div class="imgList fl">
							<ul id="list1" class="clear">
								<li>
									<img src="/static/iframe0/images/top-a.png " alt=" " />
									<p>1 、十九世纪福克斯看是开发</p>
									<div class="mask1 hide"></div>
								</li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>2 、十九世纪福克斯看是开发</p><div class="mask1 hide"></div></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>3 、十九世纪福克斯看是开发</p><div class="mask1 hide"></div></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>4、十九世纪福克斯看是开发</p><div class="mask1 hide"></div></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>4 、十九世纪福克斯看是开发</p><div class="mask1 hide"></div></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>5、十九世纪福克斯看是开发</p><div class="mask1 hide"></div></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>6、十九世纪福克斯看是开发</p><div class="mask1 hide"></div></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>7 、十九世纪福克斯看是开发</p><div class="mask1 hide"></div></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯看是开发</p><div class="mask1 hide"></div></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯看是开发</p><div class="mask1 hide"></div></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯看是开发</p><div class="mask1 hide"></div></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯看是开发</p><div class="mask1 hide"></div></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯看是开发</p><div class="mask1 hide"></div></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯看是开发</p><div class="mask1 hide"></div></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯看是开发</p><div class="mask1 hide"></div></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯看是开发</p><div class="mask1 hide"></div></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯看是开发</p><div class="mask1 hide"></div></li>
							<li><img src="/static/iframe0/images/top-a.png " alt=" " /><p>1 、十九世纪福克斯看是开发</p><div class="mask1 hide"></div></li>
							</ul>
							<input class="hide list1SortOrder" name="list1SortOrder " type="hidden " />
							<!--用来读取剩余的div-->
						</div>
						<div class="pleft"><</div>
						<div class="pright"> > </div>
						<!--按钮列表-->
						<div class="BtnList fr">
							<div class="btnTop">
								<button class="addpage">添加页面</button>
								<input type="file" accept="image/*" class="file_img">
								<button class="delpage">删除页面</button>
								<button class="copypage">复制页面</button>
								<button class="pastepage">粘贴页面</button>
							</div>
							
						</div>
					</div>
					<!--右下-->
					<div class="rig-bottom fl">
						<div class="bottomBox">
							<div class="pic" id="picbox">
								<div id="pic">
									<img src="/static/iframe0/images/big.png" alt="" width="100%" height="100%" id="show_img"/>
									<div class="mask hide"></div>
								</div>
								<!--中间开始按钮-->
								<img src="/static/iframe0/images/play-a.png" alt="" id="audio_play"/>
								<div class="clear audio_box" id="audio_box">
									<div id="wrapper">
										<audio preload="auto" controls id="audio">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.mp3">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.ogg">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.wav">
										</audio>
										<script>$( function() { $( '#audio' ).audioPlayer(); } );</script>
										<div class="wrapper">
											<div class="s_event clear hands" >
												<img src="/static/iframe0/images/hands.png" alt="" width="100%">
												<span>举手<i>1</i></span>
											</div>
											<div class="s_event clear story">
												<img src="/static/iframe0/images/story.png" alt="" width="100%">
												<span>故事<i>1</i></span>
											</div>
											<div class="s_event clear test">
												<img src="/static/iframe0/images/test.png" alt="" width="100%">
												<span>测试<i>1</i></span>
											</div>
											<div class="s_event clear smile">
												<img src="/static/iframe0/images/smile.png" alt="" width="100%">
												<span>笑话<i>1</i></span>
											</div>		
										</div>							
										<div class="quan">
											<img id="fang" onclick="launchFullScreen(document.getElementById('picbox'));" src="/static/iframe0/images/quan.png" alt="" width="100%" height="100%">
											<img id="suo" onclick="exitFullscreen();" src="/static/iframe0/images/outScreen.png" alt="" width="100%" height="100%">
											 <script type="text/javascript">
												 // 		document.body.onkeydown = function(){
													// 		return false;
													// 	}
											 	// function launchFullScreen(element) {
												 //     if(element.requestFullscreen) {
												 //      element.requestFullscreen();
												 //     }else if(element.mozRequestFullscreen) { //兼容moz
												 //      element.mozRequestFullscreen();
												 //     }else if(element.webkitRequestFullscreen) { //兼容webkit
												 //      element.webkitRequestFullscreen();
												 //     }
												 //     element.style.width = document.body.clientWidth||document.documentElement.clientWidth;
												 //     element.style.height = document.body.clientHeight||document.documentElement.clientHeight;
												 //     $(".s_event").hide();
												 //     document.getElementById('picbox').style.bottom = "0";
												 //     document.getElementById('fang').style.display = "none";
												 //     document.getElementById('suo').style.display = "block";
												 //    }

												 //    function exitFullscreen() {
													//      if(document.exitFullscreen) {
													//       document.exitFullscreen();
													//      }else if(document.mozCancelFullScreen) { //兼容moz
													//       document.mozCancelFullScreen();
													//      }else if(document.webkitExitFullscreen) { //兼容webkit
													//       document.webkitExitFullscreen();
													//      }
													//      $(".s_event").show();
													//      document.getElementById('picbox').style.bottom = "220px";
													//      document.getElementById('fang').style.display = "block";
												 //     	 document.getElementById('suo').style.display = "none";									  
													// }

											 </script>
										</div>
									</div>
								</div><br>
							</div>
							<!--四个圆球-->
							<div class="ball clear">
								<ul class="clear">
									<li>
										<p>27<span>次</span></p>
										<p>举手剩余</p>
									</li>
									<li>
										<p>27<span>次</span></p>
										<p>举手剩余</p>
									</li>
									<li>
										<p>27<span>次</span></p>
										<p>举手剩余</p>
									</li>
									<li>
										<p>27<span>次</span></p>
										<p>举手剩余</p>
									</li>
								</ul>
							</div>

							<!--右侧点击弹框-->
							<div class="box_menu clear">
								<ul class="clear">
									<li class="btn_submit"><img src="/static/iframe0/images/submit.png" alt="" width="100%"><span>提交</span></li>
									<li class="btn_add"><img src="/static/iframe0/images/add.png" alt="" width="100%"><span>添加</span></li>
									<li class="btn_del"><img src="/static/iframe0/images/delete.png" alt="" width="100%"><span>删除</span></li>
									<li class="btn_hide"><img src="/static/iframe0/images/hide.png" alt="" width="100%"><span>隐藏</span></li>
								</ul>
							</div>


							<div class="audio_ctrl clear">
																
								<div class="play_group">
									<div class="play1">
										<span class="fl">1.微软雅黑</span>
										<audio class="fl" preload="auto" controls id="audio1">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.mp3">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.ogg">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.wav">
										</audio>
										<input class="fl" type="checkbox" class="checkbox" name="checkbox" disabled="true">
										<script>$( function() { $( '#audio1' ).audioPlayer(); } );</script>
									</div>
									<div class="play1">
										<span class="fl">2.微软雅黑</span>
										<audio class="fl" preload="auto" controls id="audio2">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.mp3">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.ogg">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.wav">
										</audio>
										<input class="fl" type="checkbox" class="checkbox" name="checkbox">
										<script>$( function() { $( '#audio2' ).audioPlayer(); } );</script>
									</div>
									<div class="play1">
										<span class="fl">3.微软雅黑</span>
										<audio class="fl" preload="auto" controls id="audio3">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.mp3">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.ogg">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.wav">
										</audio>
										<input class="fl" type="checkbox" class="checkbox" name="checkbox">
										<script>$( function() { $( '#audio3' ).audioPlayer(); } );</script>
									</div>
									<div class="play1">
										<span class="fl">4.微软雅黑</span>
										<audio class="fl" preload="auto" controls id="audio4">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.mp3">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.ogg">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.wav">
										</audio>
										<input class="fl" type="checkbox" class="checkbox" name="checkbox">
										<script>$( function() { $( '#audio4' ).audioPlayer(); } );</script>
									</div>
									<div class="play1">
										<span class="fl">5.微软雅黑</span>
										<audio class="fl" preload="auto" controls id="audio5">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.mp3">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.ogg">
											<source src="/static/iframe0/audio/BlueDucks_FourFlossFiveSix.wav">
										</audio>
										<input class="fl" type="checkbox" class="checkbox" name="checkbox">
										<script>$( function() { $( '#audio5' ).audioPlayer(); } );</script>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="audio_btn">
			<button class="add_audio">添加音频</button>
			<input type="file" type="audio/mp3" id="files" onchange="import();"/>
			<button class="del_audio">删除音频</button>
		</div>
		<!--弹窗-->
		<div class="bg hide">
			<!--提交-->
			<div class="sub hide">
				<div class="sub-tit">
					<h2>提交失败</h2>
				</div>
				<div class="sub-main">
					<h2>您还需要添加一个“测试事件”</h2>
					<a href="javascript:;" class="sure">确定</a>
				</div>
			</div>
			<!--删除-->
			<div class="delete hide">
				<div class="del-tit">
					<h2>温馨提示</h2>
				</div>
				<div class="del-main">
					<h2>页面删除后将不可恢复，是否确定删除？</h2>
					<div class="fl"><a href="javascript:;" class="yes" id="yes">确定</a></div>
					<div class="fl"><a href="javascript:;" class="no" id="no">取消</a></div>
				</div>
			</div>
			<!--删除音频-->
			<div class="audiodelete hide">
				<div class="del-tit">
					<h2>温馨提示</h2>
				</div>
				<div class="del-main">
					<h2>音频删除后将不可恢复，是否确定删除？</h2>
					<div class="fl"><a href="javascript:;" class="yes" id="yes">确定</a></div>
					<div class="fl"><a href="javascript:;" class="no" id="no">取消</a></div>
				</div>
			</div>
			<!--添加音频-->
			<div class="audio_add hide">
				<div class="add-tit">
					<h2>添加音频</h2>
					<i class="icon-audioclose"></i>
				</div>
				<div class="content">
					<div class="audio-tit">
						<span>音频标题:</span>
						<input type="text">
					</div>
					<div class="audioNum">
						<span>音频类型:</span>
						<div class="check_audio clear">
							<div><input type="radio" name="radio" id="radio1"><label for="radio1">普通音频</label></div>
							<div><input type="radio" name="radio" id="radio2"><label for="radio2">空白音频</label></div>
							<div class="audio_time hide"><span>时间:</span><input type="text" id="text"><label for="text">秒</label></div>
						</div>
					</div>
					<a class="sub-file" href="#files">上传</a>	
				</div>
			</div>
			<!--添加事件-->
			<div class="event hide">
				<div class="event-tit">
					<h2>选择事件类型</h2>
					<a class="icon-close"></a>
				</div>
				<div class="event-main">
					<form action="" method="post">
						<label id="hand"><input name="Fruit" type="radio" value="" />举手<span>(<i>20</i>)</span></label><br />
						<label id="test"><input name="Fruit" type="radio" value="" />测试<span>(<i>20</i>)</span></label><br />
						<label><input name="Fruit" type="radio" value="" />笑话<span>(<i>20</i>)</span></label><br />
						<label><input name="Fruit" type="radio" value="" />故事<span>(<i>20</i>)</span></label><br />
					</form>
					<a href="javascript:;">确定</a>
				</div>
			</div>
			<div class="Handsupd hide">
                <div class="add-head">
                    <h2>举手事件添加</h2>
                    <i class="icon-closed"></i>
                </div>
                <div class="content">
                    <div class="title">
                        <span>1.标题</span>
                        <input type="text" >
                    </div>
                    <div class="select">
                        <span class='ceshi fl'>测试题选项</span>
                        <div class="rad-danxuan fl" >
                            <input type="radio" name="daan" checked><span>单选答案</span>
                        </div>
                        <div class="rad-duoxuan fl">
                            <input type="radio" name="daan"><span>多选答案</span>
                        </div>
                        <div class="zhengque fl">
                            <span>选择正确答案</span>
                        </div>
                    </div>
                    <div class="list list1">
                        <ul>
                            <li>
                                <span>A</span>
                                <input type="text">
                                <input type="radio" name="zhengque-select">
                            </li>
                            <li>
                                <span>B</span>
                                <input type="text">
                                <input type="radio" name="zhengque-select">
                            </li>
                            <li>
                                <span>C</span>
                                <input type="text">
                                <input type="radio" name="zhengque-select">
                            </li>
                            <li>
                                <span>D</span>
                                <input type="text">
                                <input type="radio" name="zhengque-select">
                            </li>
                        </ul>
                    </div>
                    <div class="list list2 hide">
                        <ul>
                            <li>
                                <span>A</span>
                                <input type="text">
                                <input type="checkbox" name="zhengque-check">
                            </li>
                            <li>
                                <span>B</span>
                                <input type="text">
                                <input type="checkbox" name="zhengque-check">
                            </li>
                            <li>
                                <span>C</span>
                                <input type="text">
                                <input type="checkbox" name="zhengque-check">
                            </li>
                            <li>
                                <span>D</span>
                                <input type="text">
                                <input type="checkbox" name="zhengque-check">
                            </li>
                        </ul>
                    </div>
                    <div class="nextpage">
                        <a href="javascript:;">下一题</a>
                        <a class="submit" href="javascript:;">提交</a>
                    </div>
                </div>
            </div>

			<!--上传-->
			<div class="upload hide">
				<div class="title">
					<h2>添加页面</h2>
					<i class="icon-upclose"></i>
				</div>
				<div class="content">
					<div class="pagetitle">
						<span>页面标题</span>
						<input type="text">
					</div>
					<div class="pagecontent">
						<img src="/static/iframe0/images/put.png" alt="">
						<a href="javascript:;">确定</a>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>